<template>
  <!--  <div> {{ obj.name }}</div>-->
  <el-row :gutter="20">
    <el-col :span="18" :offset="2">

      <div class="grid-content " style="margin: 10px;">

        <el-row class="mb-4" >
          <!--<el-button size="large" type="primary" @click="getMethod">Message</el-button>-->
          <el-button size="large" type="primary" @click="sendemail">邮件测试</el-button>
          <el-button size="large" type="primary" @click="apitest">接口测试</el-button>
          <el-button size="large" type="primary" @click="locust">locust测试</el-button>
        </el-row>

      </div>
    </el-col>
  </el-row>

  <el-divider/>

  <!--内容-->
  <el-row :gutter="20">
    <el-col :span="18" :offset="2">
      <div class="grid-content">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" index="indexMethod" label="ID"/>
          <el-table-column prop="date" label="Date" width="120"/>
          <el-table-column prop="project" label="Project" width="120"/>
          <el-table-column prop="taskid" label="TaskId" width="250"/>
          <el-table-column prop="result" label="Result" width="120"/>
          <el-table-column prop="progress" label="progress">
            <template #default="scope">
              <el-button type="text"
                         size="small" @click="deleteRow(scope.$index,scope.row)">
                删除
              </el-button>
              <el-button type="text"
                         size="small" @click="searchproc(scope.$index,scope.row.taskid)">
                查看进程
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="18" :offset="6">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="1"
                     :page-size="2"
                     layout="total, prev, pager, next"
                     :total="1000"/>
    </el-col>
  </el-row>


</template>

<script setup>


//ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，
// 这个对象上只包含一个 .value 属性
//   1、scope.$index 代表拿到每一行的index
// 2、scope.row代表拿到每一行的数据
//    响应式数据  ref
import {ref, reactive} from 'vue'
import {send_mail} from '../../../api/workers'
import dayjs from 'dayjs'

const obj = reactive({name: "name"});
const tableData = ref([]);

//删除行数据
const deleteRow = (index, $row) => {
  console.log($row);
  console.log($row.taskid);
  tableData.value.splice(index, 1)
};

const result = {
  data() {
    return {
      result: ""
    }
  }
};
const searchproc = (index, $row) => {
  console.log('taskid:', $row);
  //请求接口
  // taskstatus($row).then(response => {
  //   console.log($row);
  //   console.log(response);
  //   console.log(response.status);
  //   ElMessage(response['data']['state'])

  // })
};

const locust = () => {
  ElMessage('locust test ')
};

//任务执行
const sendemail = () => {
  send_mail().then(res => {
    let {action, code, task_id} = res.data;
    console.log("action:", action);
    console.log("code:", code);
    console.log("task_id:", task_id);
    //获取到结果后,添加到
    onAddItem(action, code, task_id)

  })
};

const apitest = () => {
  api_test().then(res => {
    let {action, code, task_id} = res.data;
    console.log("action:", action);
    console.log("code:", code);
    console.log("task_id:", task_id);
    //获取到结果后,添加到表格
    onAddItem(action, code, task_id)
  })
};


const now = new Date();

//自动增加执行任务
const onAddItem = (action, code, task_id) => {
  now.setDate(now.getDate());
  tableData.value.push({
    date: dayjs(now).format('YYYY-MM-DD HH:MM'),
    project: action,
    taskid: task_id,
    result: code

  })
}


</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>